<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
	<title>OA</title>
	 <jsp:include page="../media.jsp"></jsp:include>
	 <link type="text/css" rel="stylesheet" href="media/js/plugins/layer/laydate/need/laydate.css">
	 <link type="text/css" rel="stylesheet" href="media/js/plugins/layer/laydate/skins/default/laydate.css" id="LayDateSkin">
</head>
<body class="top-navigation">
    <div id="wrapper">
        <div id="page-wrapper" class="gray-bg">
			<!--顶部-->
			<jsp:include page="../top.jsp"></jsp:include>
           
            <div class="wrapper wrapper-content">
			<div class="row">
                <div class="col-lg-12">
					<div class="ibox">
						<div class="ibox-title">
                        	<h5>入库统计</h5>
                    	</div>
						<div class="ibox-content">
							<div class="row">
								<div class="col-sm-2 m-b-xs">
									 <select class="input-sm form-control input-s-sm inline">
                                            <option value="0">请选择电压等级</option>
                                            <option value="1">全部</option>
                                            <option value="2">110</option>
                                            <option value="3">220</option>
											<option value="3">330</option>
											<option value="4">500</option>
											<option value="4">1000</option>
                                    </select>
								</div>
								<div class="col-sm-10 m-b-xs" style="padding:0">
                                    <div class="form-group" style="margin-right: 10px; float: left;">
                                        <!--<div class="col-sm-10">-->
                                            <input class="form-control layer-date" placeholder="开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                                        <!--</div>-->
                                    </div>
                                    <div class="form-group" style="float: left;">
                                        <!--<div class="col-sm-10">-->
                                            <input class="form-control layer-date" placeholder="结束时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                                        <!--</div>-->
                                    </div>
                                     <button class="btn btn-primary" type="submit">查询</button>
								</div>								
							</div>		
							<div class="project-list" id="container" style="min-width:700px;height:400px; margin: 0 auto;">
								
                            </div>
                        </div>
                </div>
            </div>
        </div>
		</div>
        </div>
    </div>
 	<script src="media/js/plugins/layer/laydate/laydate.js"></script>
 	<script type="text/javascript" src="media/js/jquery-1.8.3.min.js"></script>
  	<script type="text/javascript" src="media/js/highcharts.js"></script>
  	<!--<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>-->
    <script>
$(function () {
    
    var colors = Highcharts.getOptions().colors,
        categories = ['2015-9-23', '2015-9-24', '2015-9-25', '2015-9-26', '2015-9-27'],
        name = '入库数量统计',
        data = [{
                y: 3,
                color: colors[0],
                drilldown: {
                    name: '入库',
                    categories: ['高压套管箱', '升高座箱', '油枕'],
                    data: [1, 1, 1],
                    color: colors[0]
                }
            }, {
                y: 2,
                color: colors[1],
                drilldown: {
                    name: '入库',
                    categories: ['升高座箱', '油枕'],
                    data: [1, 1],
                    color: colors[1]
                }
            }, {
                y: 2,
                color: colors[2],
                drilldown: {
                    name: '入库',
                    categories: ['高压套管箱',  '油枕'],
                    data: [1, 1],
                    color: colors[2]
                }
            }, {
                y: 2,
                color: colors[3],
                drilldown: {
                    name: '入库',
                    categories: ['高压套管箱', '升高座箱'],
                    data: [1, 1],
                    color: colors[3]
                }
            }, {
                y: 3,
                color: colors[4],
                drilldown: {
                    name: '入库',
                    categories: ['高压套管箱', '升高座箱', '油枕'],
                    data: [1, 1, 1],
                    color: colors[4]
                }
            }];

    function setChart(name, categories, data, color) {
	chart.xAxis[0].setCategories(categories, false);
	chart.series[0].remove(false);
	chart.addSeries({
		name: name,
		data: data,
		color: color || 'white'
	}, false);
	chart.redraw();
    }

    var chart = $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '入库数量统计'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: '入库数量（箱子 / 件）'
            }
        },
        plotOptions: {
            column: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                          return false
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    color: colors[0],
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function() {
                        return this.y;
                    }
                }
            }
        },
        tooltip: {
            formatter: function() {
                var point = this.point,
                    s = '<b>'+ this.y +'台</b><br/>';
//              if (point.drilldown) {
//                  s += 'Click to view '+ point.category +' versions';
//              } else {
//                  s += 'Click to return to browser brands';
//              }
                return s;
            }
        },
        legend:{
        	enabled: false   //图表下面的文本
        },
        series: [{
            name: name,
            data: data,
            color: 'white'
        }],
        credits: {
            	text: ''
        },
        exporting: {
            enabled: false
        }
    })
    .highcharts(); // return chart
});							
//      //外部js调用
//      laydate({
//          elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
//          event: 'focus' //响应事件。如果没有传入event，则按照默认的click
//      });
//
//       //日期范围限制
//      var start = {
//          elem: '#start',
//          format: 'YYYY/MM/DD hh:mm:ss',
//          min: laydate.now(), //设定最小日期为当前日期
//          max: '2099-06-16 23:59:59', //最大日期
//          istime: true,
//          istoday: false,
//          choose: function (datas) {
//              end.min = datas; //开始日选好后，重置结束日的最小日期
//              end.start = datas //将结束日的初始值设定为开始日
//          }
//      };
//      var end = {
//          elem: '#end',
//          format: 'YYYY/MM/DD hh:mm:ss',
//          min: laydate.now(),
//          max: '2099-06-16 23:59:59',
//          istime: true,
//          istoday: false,
//          choose: function (datas) {
//              start.max = datas; //结束日选好后，重置开始日的最大日期
//          }
//      };
//      laydate(start);
//      laydate(end);
    </script>
    </body>
</html>
